<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        /* * 通配符选择器, 是选中页面所有元素 */
        * {
            /* 消除浏览器的默认样式. */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 600px;
            margin: 20px auto;
        }

        h1 {
            text-align: center;
        }

        p {
            text-align: center;
            color: #666;
            margin: 20px 0;
        }

        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
        }

        .row span {
            width: 80px;
        }

        .row input {
            width: 200px;
            height: 30px;
        }

        .row button {
            width: 280px;
            height: 30px;
            color: white;
            background-color: orange;
            /* 去掉边框 */
            border: none;
            border-radius: 5px;
        }

        /* 点击的时候有个反馈 */
        .row button:active {
            background-color: grey;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <h1>表白墙</h1>
    <p>输入内容后点击提交, 信息会显示到下方表格中</p>
    <div class="row">
        <span>谁: </span>
        <input type="text">
    </div>
    <div class="row">
        <span>对谁: </span>
        <input type="text">
    </div>
    <div class="row">
        <span>说: </span>
        <input type="text">
    </div>
    <div class="row">
        <button id="submit">提交</button>
    </div>
    <!-- <div class="row">
        xxx 对 xx 说 xxxx
    </div> -->
</div>

<script>

    // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示.
    // 点击的时候,
    // 创建一个新的 div.row 把内容构造到这个 div 中即可.
    let containerDiv = document.querySelector('.container');
    let inputs = document.querySelectorAll('input');
    let button = document.querySelector('#submit');
    button.onclick = function() {
        // 1. 获取到三个输入框的内容
        let A = inputs[0].value;
        let B = inputs[1].value;
        let to = inputs[2].value;
        if (A == '' || to == '' || B == '') {
            return;
        };
        // 2. 构造新 div
        let rowDiv = document.createElement('div');
        rowDiv.className = 'row me ssage';
        rowDiv.innerHTML = A + ' 对 ' + B + ' 说: ' + to;
        containerDiv.appendChild(rowDiv);
        // 3. 清空之前的输入框内容
        for (let input of inputs) {
            input.value = '';
        };

        //4.在提交按钮的方法里,把用户填写的内容,发送给服务器,让服务器来保存 ;
        //$ 是 jQuery 的全局变量, ajax是$的方法, 用ajax 来调用 jquery的api
        // ajax 的参数时 js 对象 , 里面可以有很多属性 ;

        //创建 body对象 ,作为body的内容 是一个js 对象
        let requestBody = {                    
            "A":  A,         //A里值就是第一个输入框的内容
            "B": B ,           //B里的值就是第二个输入框内容s
            "to": to           //第三个输入框内容
        };
        // 上面body 是一个js对象, 还要转成json字符串 ;
        let jsonString = JSON.stringify(requestBody);   //把js转成json

        $.ajax({             //给服务器发起的ajax请求, 里面是json格式的数据      
            type: 'post',   // post方法
            url: 'bbq' ,     //路径   , 不带 / 是一个相对路径的写法 ;
            contentType: 'application/json ; charset=utf8' , //指定body格式
            data : jsonString,              //body的内容,把json数据给body
            success:function(body){         //这里的body是响应里的body
                //这个回调函数,就是收到响应要执行的代码 ;
                //     前端用 console.log 打印日志到控制台 (浏览器开发者工具的控制台)
                console.log("response:" + body);
            }
        });
    }
    

     
    // 获取数据的代码
    // script里的 js 代码 ,就是在页面加载时执行的 ;
    // 发起 GET请求,从服务器获取到数据
    // get 请求 不需要body也不需要那些其他属性
    $.ajax({
       type : 'get',
       url : 'bbq' , 
       success: function(body){

             //  拿到 container 父元素
             let containerDiv =  document.querySelector('.container');

        // 处理响应 (处理json 格式的数据 )
          // 把json数组 处理
            //  body 是一个数组,所以 message 就是一个 js 对象 ;
          for(let i=0 ; i < body.length ; i ++){
                // 这个js对象里就有 3个属性  : A   , to , B  ;
               let message = body[i] ;    
                // 根据 message对象 来构造 html ,显示到页面

                //构造div
                // createElement方法 能 构造出 html 标签 ;
                // 此时 就得到一个空的 div 标签 ;
                let div = document.createElement('div');
                // 设置 div的class属性 = row , 和上面的div对应,使用同一个 class 样式
                 div.className =  'row' ;    
                 // 给div 设置内容,(最后显示出来的内容) 
                 div.innerHTML = message.A + " 对 " + message.B + " 说 " + message.to ; 
                 // 这样就得到 <div class='row'> xx 对 xx 说 xxx </div> 这样的div标签
                   
                 // 最后在把 这个div 添加到 container 的末尾
                 containerDiv.appendChild(div);

                }

       }
    });


</script>
</body>
</html>
